<template>
	<view>
		<uni-nav-bar left-icon="left" backgroundColor="rgb(77, 139, 246)" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
			<view class="nav-title">添加银行卡</view>
		</uni-nav-bar>
		<view class="content">
			<uni-forms style="border-bottom: 1px #eee solid;" label-position="top" :border="true">
				<uni-forms-item label="姓名">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.acctName" placeholder="请输入持卡人姓名" />
				</uni-forms-item>
				<uni-forms-item label="银行卡号">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.cardNo" placeholder="请输入银行卡号" />
				</uni-forms-item>
				<!-- <uni-forms-item label="证件类型">

					<uni-easyinput :inputBorder="false" v-model="bankInfo.id_type" placeholder="请选择证件类型"  />
				</uni-forms-item> -->
				<uni-forms-item label="身份证号">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.idNo" placeholder="请填写身份证号" />
				</uni-forms-item>
				<uni-forms-item label="手机号">
					<uni-easyinput :inputBorder="false" v-model="bankInfo.bindPhone" placeholder="请输入银行卡预留手机号" />
				</uni-forms-item>
			</uni-forms>
			<view class="agree">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox value="agree" color="#457DF0" style="transform:scale(0.6)" />
					</label>

				</checkbox-group>
				<text>我已阅读并同意 <!-- <text style="color: #4667E2;">《用户服务协议》</text>、 --><text style="color: #4667E2;"
						@click="checkProtocol">《快捷支付协议》</text> </text>
			</view>
			<button style="border-radius: 50px;height: 35px;font-size: 14px;margin-top: 20px;"
				class="align-center justify-center" type="primary" hover-class="none" @click="next">下一步</button>
		</view>

		<!-- show:是否显示弹框 phone:手机号  autoCountdown:自动时间秒数 len:短信验证码长度 @closeClick:关闭弹框 @confirmClick:确认弹框 -->
		<cc-codeDialog :show="verifyShow" :phone="bankInfo.bindPhone" :autoCountdown="true" :len="6"
			@closeClick="verifyShow=false" @confirmClick="confirmClick" @change="change"></cc-codeDialog>
	</view>
</template>

<script setup>
	import ccCodeDialog from '@/uni_modules/cc-codeDialog/components/cc-codeDialog/cc-codeDialog.vue'

	import {
		ref,

	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import PayOrderApi from '@/sheep/api/pay/order';
	import sheep from '@/sheep';
	const bankInfo = ref({
		acctName: '',
		cardNo: '',
		// id_type: 'IDCARD',
		idNo: '',
		bindPhone: '',
		id: '',
		userId: '',
		token: undefined,
		verifyCode: undefined,
	})
	const checkProtocol = () => {
		uni.navigateTo({
			url: '/pages/me/components/payAgree'
		})
	}
	const verifyShow = ref(false)

	const onClickNavBack = () => {
		uni.navigateTo({
			url: '/pages/pay/index?id=' + payInfo.value.orderInfo.id
		})
	}
	const next = async () => {

		// verifyShow.value = true
		console.log('bankInfo.value', bankInfo.value);
		if (bankInfo.value.acctName == '') {
			uni.showToast({
				title: '请输入持卡人姓名',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.cardNo == '' || !/^\d{13,19}$/.test(bankInfo.value.cardNo)) {
			uni.showToast({
				title: '请输入正确的银行卡号',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.idNo == '' || !/^(?:\d{15}|\d{17}[\dXx])$/.test(bankInfo.value.idNo)) {
			uni.showToast({
				title: '请输入正确的身份证号',
				icon: 'none'
			})
			return
		}
		if (bankInfo.value.bindPhone == '' || !/^1[3-9]\d{9}$/.test(bankInfo.value.bindPhone)) {
			uni.showToast({
				title: '请输入正确的银行卡预留手机号',
				icon: 'none'
			})
			return
		}
		if (!isAgree.value) {
			uni.showToast({
				title: '请同意快捷支付协议',
				icon: 'none'
			})
			return
		}
		let res = await PayOrderApi.goPay(bankInfo.value)
		console.log('提交银行卡信息', res)
		if (res.code == 0) {
			if (res.data.ret_code == '8888') {
				verifyShow.value = true
				bankInfo.value.token = res.token
			} else {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'none'
				})
			}

		}
	}

	const confirmClick = async (result) => {
		console.log("result = ", result);
		bankInfo.value.verifyCode = result.code
		let res = await PayOrderApi.twoPay(bankInfo.value)
		console.log('付款', res)
		if (res.code == 0) {
			if (res.data.ret_code == '0000') {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'success',
					success: function() {
						sheep.$router.redirect('/pages/pay/result', {
							id: bankInfo.value.id,
							orderType: payInfo.value.orderType,
							payState: 'success'
						});
					}
				})
			} else {
				uni.showToast({
					title: res.data.ret_msg,
					icon: 'none'
				})
			}
		}
	}
	const change = async (val) => {

		console.log('val', val)
		if (val.type == "0") {
			let res = await PayOrderApi.goPay(bankInfo.value)
			console.log('提交银行卡信息', res)
			if (res.ret_code == '8888') {
				verifyShow.value = true
				bankInfo.value.token = res.token
			} else {
				uni.showToast({
					title: res.ret_msg,
					icon: 'none'
				})
			}
		}

	}
	const isAgree = ref(false)
	const changeAgree = (e) => {

		if (e.detail.value.length > 0) {
			isAgree.value = true
		} else {
			isAgree.value = false
		}
	}
	const payInfo = ref({})
	onLoad((ops) => {
		// console.log(JSON.parse(ops.payInfo))
		try {
			// 解码并解析 payInfo
			const payInfoStr = decodeURIComponent(ops.payInfo);
			const parsedPayInfo = JSON.parse(payInfoStr);

			// 检查解析结果是否符合预期
			if (typeof parsedPayInfo !== 'object' || parsedPayInfo === null) {
				throw new Error('解析后的 payInfo 不是一个有效的对象');
			}

			payInfo.value = parsedPayInfo;

			// 初始化 bankInfo
			bankInfo.value.id = parsedPayInfo.orderInfo.id;
			bankInfo.value.userId = uni.getStorageSync('userId') || '';

			console.log('payInfo:', payInfo.value);
			console.log('bankInfo.value', bankInfo.value);
		} catch (error) {
			console.error('Failed to parse payInfo:', error);
			uni.showToast({
				title: '解析支付信息失败',
				icon: 'none'
			});
		}
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: transparent;
	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.content {
		padding: 20px;
		box-sizing: border-box;
	}

	.agree {
		// width: 90%;
		margin-top: 10px;
		// padding: 0 20px;
		font-size: 12px;
		display: flex;
		align-items: center;
	}
</style>